//点击开始游戏动态生成100个小格  100个div
//leftClick 的时候 没有类显示数字 （代表以当前小格为中心8个小格的雷数）扩散（当前周围八个小格没有雷）显示不是0的时候停止
//有类直接结束
//rightClick 的时候没有标记并且没有数字就经行标记 游标记就取消标记    判断标记是否正确 10个都正确标记就提示成功 
//已经出现数组  无效果

var startBtn = document.getElementById('btn');
var box = document.getElementById('box');
var flagBox = document.getElementById('flagBox');
var alertBox = document.getElementById('alertBox')
var closeBtn = document.getElementById('close');
//声明一个变量代表雷的数量
var minesNum;
// 来记录当前已经被标记出来雷的数量
var mineOver;
var block;
var mineMap = [];
var startGameBool = true;


//一进来先调应 bindEvent()
bindEvent()
//这个事件是一个点击事件所以封装一个函数，把所有的点击和鼠标游关的全部放里面
bindEvent();
function bindEvent() {
    startBtn.onclick = function () {
        if(startGameBool){
            box.style.display = 'block';
            flagBox.style.display = 'block';
            init();
            startGameBool = false;
        }
      
    }
    box.oncontextmenu = function () {
        return false;
    }
    box.onmousedown = function (e) {
        var event = e.target;
        if (e.which == 1) {
            leftClick(event);
        } else if (e.which == 3) {
            rightClick(event);
        }
    }
    //当点击close 的时候让所有东西消失
    closeBtn.onclick = function () {
        alertBox.style.display = 'none';
        flagBox.style.display = 'none';
        box.style.display = 'none';
        //每次点击让HTML为空
        box.innerHTML = '';
        startGameBool = true;
    }
}

//动态生成100个格子并且要在100个小格随机抽出10个格做为是游雷的区域

//生成100个小格的函数 并且插入到box里面 同时在生成随机的10个有雷的小格
function init() {
  minesNum = 10;
  mineOver = 10;
  score.innerHTML = mineOver;
  
  for (var i = 0; i < 10; i++) {
    for (var j = 0; j < 10; j++) {
        var con = document.createElement('div');
        con.classList.add('block');
        con.setAttribute('id', i + '-' + j);
        box.appendChild(con);
        mineMap.push({ mine: 0 });
    }
}
   //生成10个雷数  现取出100个小个子
   block = document.getElementsByClassName('block');
   while (minesNum) {
       var mineIndex = Math.floor(Math.random() * 100);
       if (mineMap[mineIndex].mine === 0) {
           mineMap[mineIndex].mine = 1;
           block[mineIndex].classList.add('isLei');
           minesNum--;
       }
   }
 }

 function leftClick(dom) {
  if(dom.classList.contains('flag')){
      return;
  }
  var isLei = document.getElementsByClassName('isLei');
  if (dom && dom.classList.contains('isLei')) {
      for (var i = 0; i < isLei.length; i++) {
          isLei[i].classList.add('show');
      }
      setTimeout(function () {
          alertBox.style.display = 'block';
          alertImg.style.backgroundImage = 'url("img/over.jpg")';
      }, 800)
  } else {
      var n = 0;
      //显示数字
      var posArr = dom && dom.getAttribute('id').split('-');
      var posX = posArr && +posArr[0];
      var posY = posArr && +posArr[1];
      dom && dom.classList.add('num');
      for (var i = posX - 1; i <= posX + 1; i++) {
          for (var j = posY - 1; j <= posY + 1; j++) {
              var aroundBox = document.getElementById(i + '-' + j);
              if (aroundBox && aroundBox.classList.contains('isLei')) {
                  n++;
              }
          }
      }
      dom && (dom.innerHTML = n);
      if (n == 0) {
          for (var i = posX - 1; i <= posX + 1; i++) {
              for (var j = posY - 1; j <= posY + 1; j++) {
                  var nearBox = document.getElementById(i + '-' + j);
                  if (nearBox && nearBox.length != 0) {
                      if (!nearBox.classList.contains('check')) {
                          nearBox.classList.add('check');
                          leftClick(nearBox);
                      }
                  }
              }
          }
      }
  }
}
